<template>
  <div>
    <micro-app
      name="ali-preview"
      :url="url"
      baseroute=""
      :data="microAppData"
      @created="handleCreate"
      @beforemount="handleBeforeMount"
      @mounted="handleMount"
      @unmount="handleUnmount"
      @error="handleError"
      @datachange="handleDataChange"
      disable-sandbox
      keep-alive
    />
  </div>
</template>

<script>
import microApp from '@micro-zoe/micro-app'

export default {
  name: 'PagePreview',
  props: {
    id: { type: String, default: '' },
  },
  data() {
    return {
      url: `http://localhost:8360/preview.html`,
      microAppData: { scenarioId: this.id },
    }
  },
  created() {
    microApp.setGlobalData({ token: this.$store.getters.token })
  },
  mounted() {
    console.log('pagedesign > mounted', this.id)
  },
  methods: {
    handleDataChange(e) {
      const { action, params } = e.detail.data
      // console.log('收到ali-designer的数据:', action, params)
      const invokes = {
        navToPreview: (p) => {
          console.log('call navToPreview', p)
        },
      }

      invokes[action](params)
    },

    handleCreate() {
      // console.log('ali-designer 创建了')
    },

    handleBeforeMount() {
      // console.log('ali-designer 即将被渲染')
    },

    handleMount() {
      // console.log('ali-designer 已经渲染完成')
      // setTimeout(() => {
      //   this.microAppData = { msg: '来自基座的新数据' }
      // }, 2000)
    },

    handleUnmount() {
      // console.log('ali-designer 卸载了')
    },

    handleError() {
      // console.log('ali-designer 加载出错了')
    },
  },
}
</script>
<style></style>
